<script setup lang="ts">
  import { useGetFaultTypes, useFaltTypesDel, useGetFaults } from '@/services/pages/know/fault'
  import { ElDivider, ElMessageBox, TableInstance } from 'element-plus'
  import { h, ref } from 'vue'
  import FaultTypeDialog from './FaultTypeDialog.vue'
  import { HMessage, HMessageBox } from '@/components/common/message'
  import infoTip from '@/config/info-tip'

  const { faultTypes, getFaultTypesLoading, getFaultTypes } = useGetFaultTypes()
  const { faultTypesDel } = useFaltTypesDel()
  const { total, faults, getFaultsParam, getFaultsLoading, getFaults } = useGetFaults()

  defineOptions({
    name: 'KnowFaultTypesTable',
  })

  const emits = defineEmits<{
    (e: 'selection-change', value: Array<string>): void
  }>()

  // 间距组件的间隔符
  const spacer = h(ElDivider, {
    direction: 'vertical',
    style: 'display: flex; align-items: center;',
  })

  // 表格组件实例
  const tableInstance = ref<TableInstance | null>(null)

  // 故障分类弹窗显示状态
  const faultTypeDialogVisible = ref(false)

  // 当前正在编辑的故障分类id
  const currentEditFaultTypeId = ref('')

  // 选择的故障分类id集合
  const selectedFaultTypeIds = ref<Array<string>>([])

  /**
   * 编辑故障分类
   * @param {string} id - 故障分类id
   */
  const handleEdit = (id: string) => {
    currentEditFaultTypeId.value = id
    faultTypeDialogVisible.value = true
  }

  /**
   * 删除故障分类事件
   * @param {KnowFaultTypes} faultType - 故障分类对象
   */
  const handleDel = (faultType: KnowFaultTypes) => {
    if (tableInstance.value) {
      tableInstance.value.clearSelection()
      tableInstance.value.toggleRowSelection(faultType, true)
      ElMessageBox({
        type: 'warning',
        title: '提示',
        message: infoTip.know.fault.type.deleteOne,
        showCancelButton: true,
        async beforeClose(action, instance, done) {
          if (['close', 'cancel'].includes(action)) {
            done()
            return
          }

          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.cancelButtonLoading = true
            const res = await faultTypesDel(selectedFaultTypeIds.value)
            instance.cancelButtonLoading = false
            instance.confirmButtonLoading = false
            if (res.code === 20000) {
              HMessage.success(infoTip.know.fault.type.deleteSuccess)
              getFaultTypes()
              done()
              return
            }

            HMessageBox.error(res.message)
          }
        },
      })
    }
  }

  /**
   * 故障分类选择事件
   * @param _faultTypes 故障分类选择列表
   */
  const handleSelectionChange = (_faultTypes: typeof faultTypes.value) => {
    selectedFaultTypeIds.value = _faultTypes.map((item) => item.id)
    emits('selection-change', selectedFaultTypeIds.value)
  }

  defineExpose({
    getFaultTypes,
  })
</script>

<template>
  <div class="know-fault-types-table">
    <el-table
      :data="faultTypes"
      height="100%"
      :border="true"
      stripe
      v-loading="getFaultTypesLoading"
      ref="tableInstance"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50" :align="'center'"></el-table-column>
      <el-table-column
        label="序号"
        fixed="left"
        type="index"
        width="50"
        :align="'center'"
      ></el-table-column>
      <el-table-column
        label="分类名称"
        min-width="240"
        show-overflow-tooltip
        prop="name"
      ></el-table-column>
      <el-table-column label="创建时间" width="140" prop="createTime"></el-table-column>
      <el-table-column label="更新时间" width="140" prop="updateTime"></el-table-column>
      <el-table-column label="状态" width="70" fixed="right" :align="'center'">
        <template #default="{ row }">
          <div class="flex-center">
            <h-status v-if="!row.status">启用</h-status>
            <h-status type="info" v-else>禁用</h-status>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="90" fixed="right">
        <template #default="{ row }">
          <el-space :size="0" :spacer="spacer">
            <h-link @click="handleEdit(row.id)">编辑</h-link>
            <h-link type="error" @click="handleDel(row)">删除</h-link>
          </el-space>
        </template>
      </el-table-column>
    </el-table>

    <fault-type-dialog
      :fault-type-id="currentEditFaultTypeId"
      v-model:visible="faultTypeDialogVisible"
      @update="getFaultTypes"
    ></fault-type-dialog>
  </div>
</template>

<style scoped lang="scss">
  .know-fault-types-table {
    height: 100%;
  }
</style>
